<template>
	<view class="live__item"
	@click="onClickToLiveDetails"
	>
		<!-- 直播缩略图 -->
		<view class="live__item-img-box">
			<image 
				:src="data.cut_path" 
				class="live__item-img" 
				@click="display(data)"
				mode="aspectFill"
			/>
			<block v-if="data.state_id == 2">
				<!-- 直播中 -->
				<!-- 观看次数 -->
				<view class="live__item-views-box flex">
					<!-- <image src="@/static/viewsIcon.png" mode="aspectFill" class="live__item-views-icon" /> -->
					<text class="live__item-type">直播中</text>
					<text class="live__item-views">{{data.watch_total}}</text>
				</view>
			</block>
			<block v-if="data.state_id == 3">
				<!-- 直播回放 -->
				<!-- 观看次数 -->
				<view class="live__item-views-box flex">
					<!-- <image src="@/static/viewsIcon.png" mode="aspectFill" class="live__item-views-icon" /> -->
					<text class="live__item-type">已结束</text>
					<text class="live__item-views">{{data.watch_total}}</text>
				</view>
			</block>
			<block v-if="data.state_id == 1">
				<!-- 直播预告 -->
				<!-- 观看次数 -->
				<view class="live__item-views-box flex">
					<text class="live__item-type">将开播</text>
					<text class="live__item-views">{{data.watch_total}}</text>
				</view>
			</block>
		</view>
		
		<!-- 直播标题 -->
		<text class="live__item-title">{{data.title}}</text>
	</view>
</template>

<script setup>
import { onActivated, onUnmounted} from 'vue'

const props = defineProps({
	data:Object
})

function display(data) {
	
}

function onClickToLiveDetails(){
	console.log('单个liveItem：',props.data.id)
	console.log('跳转到直播详情页!')
	// console.log('跳转前页面的数据：',props.data)
	const params = {
		id:props.data.id
	}
	uni.navigateTo({
		url:`/pages/liveDetails/liveDetails?id=${params.id}`
		// url:`/pages/details/details?id=${params.id}`
	})
}

onActivated(()=>{
	// console.log('组件重新插入');
})

onUnmounted(()=>{
	// console.log('live组件卸载');
})

// console.log("data", props.data.value);

</script>

<style lang="scss" scoped>
.live__item{
	// width: 350rpx;
	width: 330rpx;
	flex-shrink: 0;
	margin-bottom: 20rpx;
	&-img-box{
		width: 100%;
		height: 378rpx;
		border-radius: 10rpx;
		position: relative;
	}
	
	&-img{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	&-title{
		font-size: 32rpx;
	}
	
	&-views-box{
		width: 100%;
		height: 48rpx;
		background-color: rgba(#767676, .3);
		position: absolute;
		bottom: 0;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 10rpx;
	}
	
	&-type{
		
	}
	
	&-views{
		
	}
	
	&-title{
		font-size: 26rpx;
		color: #575958;
		width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>